<template>
	<view class="box pb-100">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="flex-col page">
			<view class="flex-col group">
				<view class="flex-col section_1">
					<view class="flex-col group_1">
						<view class="flex-row group_2">
							<text @click="navigateTo('/pages/classification/index?from=home', false)">
								{{cateName}}
							</text>
							<image src="/static/local/40372ad8302b0901727bcae31debb4dd.png" class="image_1" />
						</view>
						<view class="justify-center search" @click="navigateTo('/pages/search/search-page', false)">
							<image src="/static/remote/b27908d2b8262ac59bf51e00104f0fd5.png" class="image_2" />
							<text class="text_1">输入关键词搜索课程</text>
						</view>
					</view>
				</view>
				<z-paging ref="paging" class="z-paging" v-model="reCourses" @query="getReCourses"
					:empty-view-fixed="false" @scroll="changeBgColor" :hide-loading-more-when-no-more-by-limit="5"
					:style="'background-color: rgba(255,255,255,'+opacityNum+')' ">
					<view class="flex-col group_3">
						<view class="flex-col items-center group_4" :class="{swiper_bg:sliders && sliders.length > 1}">
							<u-swiper :list="sliders" name="thumb" height="41vw" bg-color="transparent"
								:interval="duraTime"></u-swiper>
						</view>
						<view class="flex-row equal-division">
							<view class="equal-division-item flex-col items-center" v-for="item in home_nav"
								:key="item.id" @click="navClick(item)">
								<u-image :src="item.thumb" :lazy-load="true" class="image_5" mode="aspectFill">
								</u-image>
								<text class="text_2">{{item.title}}</text>
							</view>
						</view>
					</view>
					<view class="flex-row section_3">
						<view class="flex-col group_11">公告:</view>
						<u-notice-bar class="text_9" mode="vertical" :list="noticeList" name="title" type="none"
							:volume-icon="false" :duration="duraTime">
						</u-notice-bar>
					</view>
					<view class="flex-col group_12">
						<view class="flex-row group_13">
							<view class="section_5"> </view>
							<text class="text_10">推荐课程</text>
						</view>
						<view class="flex-col group_14">
							<view class="list-item flex-row" :key="item._id" v-for="item in reCourses"
								@click="openCourse(item._id)">
								<u-image :src="item.thumb" :lazy-load="true" class="image_11" mode="aspectFill">
								</u-image>
								<view class="right-group flex-col">
									<text class="text_11">{{ item.title }}</text>
									<view class="center-group flex-row">
										<view class="left-text-wrapper" :key="dynamicTag"
											v-for="dynamicTag in item.dynamicTags">{{dynamicTag}}</view>
									</view>
									<view class="justify-between">
										<text class="text_17">{{item.user_count}}人已购</text>
										<text class="text_19">{{rightText(item)}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// 当前分类名称
				cateName: '请选择分类',
				// 轮播图列表
				sliders: [],
				// 金刚区列表
				home_nav: [],
				// 列表背景颜色深度
				opacityNum: 0,
				course_rec: [],
				article_rec: [],
				pay_article_rec: [],
				free_live_course: [],
				nav_column: 4,
				nav_row: 2,
				nav_current: 0,
				ajax_loading: true,
				// 推荐课程列表
				reCourses: [],
				// 通知完整数据列表
				noticesDataList: [],
				// 通知展示列表
				noticeList: [],
				// 轮播间隔
				duraTime: 2500
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		computed: {
			rightText() {
				return (item) => {
					if (vk.pubfn.isNotNull(item.isBuy)) return '已购买'
					return '￥' + item.charge / 100
				}
			}
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				// 从其他页面返回时刷新
				uni.$on('update', function(data) {
					that.getReCourses(1, 10)
				})
			},
			// 轮播及金刚区数据
			getSwiperAndNav() {
				vk.callFunction({
					url: 'client/index/pub/index',
					success(res) {
						that.sliders = res.data.sliders
						that.home_nav = res.data.home_nav
						that.duraTime = res.data.duraTime
						that.ajax_loading = false
					}
				});
			},
			// 公告数据
			getNotices() {
				vk.callFunction({
					url: 'client/notices/pub/getNoticesList',
					success(data) {
						// 整体数据
						that.noticesDataList = data.rows
						// 展示列表
						that.noticesDataList.map(v => {
							that.noticeList.push(v.title)
						})
					}
				});
			},
			// 推荐课程数据
			getReCourses(pageNo, pageSize) {
				let record = false
				// 下拉刷新时获取首页所有数据
				if (pageNo == 1) {
					that.noticesDataList = []
					that.noticeList = []
					that.getSwiperAndNav()
					that.getNotices()
					if (uni.vk.callFunctionUtil.checkToken()) record = true
				}
				// 获取分类
				let category_info = vk.getStorageSync('bank_cate')
				let data = {
					pageIndex: pageNo,
					pageSize: pageSize,
					is_rec: 1
				}
				if (record) data['need_user_info'] = true
				if (category_info) {
					that.cateName = category_info.name ? category_info.name : '请选择分类'
					data.type = category_info.type
					data.category_id = category_info.id
				} else {
					that.cateName = '请选择分类'
				}
				if (uni.vk.callFunctionUtil.checkToken()) data['need_user_info'] = true
				vk.callFunction({
					url: 'client/course/pub/recommend_course',
					title: '获取中...',
					data: data,
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			navClick(e) {
				vk.navigateTo(e.url);
			},
			navChange(e) {
				this.nav_current = e.detail.current;
			},
			sliderTap(index) {
				let slider = this.sliders[index];
				if (!slider.url)
					return
				if (slider.url.substr(0, 4) === "http") {
					this.goWebview(slider.url);
				} else {
					uni.navigateTo({
						url: slider.url,
					});
				}
			},
			// 列表滚动时隐藏背景
			changeBgColor(e) {
				if (e.detail.scrollTop >= 0) {
					if (e.detail.scrollTop <= 30) {
						this.opacityNum = 0
					} else if (30 < e.detail.scrollTop && e.detail.scrollTop <= 120) {
						this.opacityNum = e.detail.scrollTop / 120
					} else if (e.detail.scrollTop > 120) {
						this.opacityNum = 1
					}
				}
			},
			// 推荐课程详情
			openCourse(id) {
				uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/class-detail?_id=' + id, false);
			}
		},
		onUnload() {
			uni.$off('update')
		}
	}
</script>
<style lang="scss" scoped>
	.status_bar,
	.top_view {
		background-color: #FDCF03;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.group {
			height: 100%;
			flex: 1 1 auto;
			overflow-y: auto;

			.section_1 {
				padding-bottom: 176rpx;
				background-image: url('/static/local/16403090250739726597.png');
				background-position: 0px 0px;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.group_1 {
					margin-top: 24rpx;
					padding: 0 20rpx;

					.group_2 {
						color: rgb(51, 51, 51);
						font-size: 34rpx;
						line-height: 41rpx;
						white-space: nowrap;

						.image_1 {
							margin: 24rpx 0 0 6rpx;
							width: 12rpx;
							height: 12rpx;
						}
					}

					.search {
						margin-top: 44rpx;
						padding: 14rpx;
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
						background-color: rgb(255, 255, 255);
						border-radius: 34rpx;

						.image_2 {
							width: 40rpx;
							height: 40rpx;
						}

						.text_1 {
							margin-left: 10rpx;
							margin-top: 4rpx;
						}
					}
				}
			}

			.z-paging {
				/* #ifdef APP-PLUS */
				top: 20%;
				/* #endif */
				/* #ifdef H5 */
				top: 15%;
				/* #endif */
				height: calc(100vh - 280rpx);
			}

			.group_3 {
				color: rgb(91, 91, 91);
				font-size: 24rpx;
				line-height: 29rpx;
				white-space: nowrap;

				.group_4 {
					margin: 0 20rpx;
					border-radius: 16rpx;
					position: relative;
					border-radius: 16rpx;
					width: 94.5vw;

					.u-swiper-wrap {
						width: 100%;
						height: 100%;
					}
				}

				.swiper_bg {
					box-shadow: 0px 6rpx 16rpx 0px rgba(255, 150, 12, 0.22);
				}

				.equal-division {
					margin-top: 43rpx;
					flex-wrap: wrap;

					.equal-division-item {
						width: 20%;
						padding: 10rpx 0;

						.image_5 {
							width: 92rpx !important;
							height: 92rpx !important;
							// border-radius: 50% !important;
							overflow: hidden !important;
							box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
						}

						.text_2 {
							margin-top: 21rpx;
						}
					}
				}
			}

			.section_3 {
				margin-top: 35rpx;
				padding: 9rpx 20rpx;
				background-color: rgb(245, 245, 245);

				.group_11 {
					color: rgb(132, 75, 0);
					font-size: 36rpx;
					line-height: 52rpx;
					white-space: nowrap;
					width: 116rpx;
					font-family: YouSheBiaoTiHei;
					background-image: linear-gradient(180deg,
							rgb(253, 211, 3) 0%,
							rgb(253, 211, 3) 0%,
							rgb(255, 150, 12) 100%,
							rgb(255, 150, 12) 100%);
					border-radius: 20rpx 0px 20rpx 0px;
					height: 52rpx;
					text-align: center;
					margin-top: 9rpx;
				}

				.text_9 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					line-height: 34rpx;
					flex: 1;
				}
			}

			.group_12 {
				margin: 35rpx 0 0;
				padding-left: 20rpx;
				padding-right: 4rpx;

				.group_13 {
					color: rgb(0, 0, 0);
					font-size: 34rpx;
					line-height: 41rpx;
					white-space: nowrap;

					.section_5 {
						background-color: rgb(253, 211, 3);
						border-radius: 5rpx;
						width: 10rpx;
						height: 46rpx;
					}

					.text_10 {
						margin: 3rpx 0 3rpx 14rpx;
					}
				}

				.group_14 {
					margin-top: 25rpx;
					// height: 968rpx;

					.list-item {
						margin-right: 20rpx;
						padding-bottom: 40rpx;
						border-bottom: 1px solid #F0F0F0;

						&:not(:first-of-type) {
							margin-top: 40rpx;
						}

						.image_11 {
							border-radius: 8rpx;
							width: 284rpx !important;
							height: 182rpx !important;
						}

						.right-group {
							margin-left: 26rpx;
							flex: 1 1 auto;

							.text_11 {
								color: rgb(51, 51, 51);
								font-size: 30rpx;
								line-height: 35rpx;
								text-align: left;
							}

							.center-group {
								margin-top: 33rpx;
								color: rgb(255, 150, 12);
								font-size: 20rpx;
								line-height: 28rpx;
								white-space: nowrap;
								flex-wrap: wrap;

								.left-text-wrapper {
									background-repeat: no-repeat;
									padding: 4rpx 14rpx;
									margin: 10rpx 20rpx 10rpx 0;
									background: rgba(255, 150, 12, 0.12);
									border: 1rpx solid #FF960C;
									border-radius: 16rpx;
								}
							}

							.text_17 {
								margin-top: 19rpx;
								color: rgb(153, 153, 153);
								font-size: 20rpx;
								line-height: 24rpx;
								white-space: nowrap;
							}

							.text_19 {
								color: rgb(246, 21, 21);
								font-size: 30rpx;
								margin-top: 8rpx;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
	}
</style>